<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>ShiPing</title>
    <meta name="description" content=""/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/iview.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/index.css">
    <script type="text/javascript" src="__STATIC__/js/vue.min.js"></script>
    <script type="text/javascript" src="__STATIC__/js/iview.min.js"></script>
    <style>
        body {
            background-color: black;
            background-image: radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 40px),
            radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 30px),
            radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 40px),
            radial-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .1) 2px, transparent 30px);
            background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
            background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
        }

        .main {
            width: 50%;
            margin: 2% 25% 0 25%;
        }

        .top-search {
            padding: 10px;
            /* text-align: right; */
            display: flex;
            justify-content: space-between;
            background: #ffffff54;
            border-radius: 4px;
        }

        .main-list {
            background-color: #f2f2f2;
            box-shadow: 0 0 15px 0px white;
            margin-top: 1vh;
            padding-top: 1px;
            padding-bottom: 1px;
            border-radius: 4px;
            height: 85vh;
            overflow: hidden;
            overflow-y: scroll;
        }

        ::-webkit-scrollbar {
            /*隐藏滚轮*/
            display: none;
        }

        .card-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: white;
            margin: 10px;
            cursor: pointer
        }

        .card-item:hover {
            box-shadow: 0 0 10px 0 #2d8cf0;
        }

        .item-image {
            width: auto;
            height: 120px;
        }

        .demo-drawer-profile {
            font-size: 14px;
        }

        .demo-drawer-profile .ivu-col {
            margin-bottom: 12px;
        }

        .img-contain {
            padding-left: 10px;
            width: 30%;
            position: relative;
        }

        .content-contain {
            width: 80%;
        }

        .content-contain div {
            margin-top: 6px;
        }

        .hot-tag {
            position: absolute;
            top: -10px;
            left: -10px;
        }

        .demo-spin-icon-load {
            animation: ani-demo-spin 1s linear infinite;
        }

        @keyframes ani-demo-spin {
            from {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .demo-spin-col {
            height: 100px;
            position: relative;
            border: 1px solid #eee;
        }

        .pre-img {
            width: 250px;
            height: auto;
        }

        .inner-title {
            width: 30%;
            margin-bottom: 10px;
            padding: 4px 8px;
            color: white;
            background: #19be6b;
            text-align: center;
            border-radius: 3px;
        }

        .product_image {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 5vw;
            width: 80%;

        }

        .shop_image {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 5vw;
            width: 80%;
            margin-top: 15px;
        }

        .self-c {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .desc {
            flex-wrap: wrap;
            width: 50%;
        }

        .l-desc {
            width: 75%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-weight: bold;
            float: right;
        }

        .right {
            text-align: right;
        }

    </style>
</head>
<body>
<div class="main" id="app">
    <div class="top-search">
        <div class="ivu-btn-group ivu-btn-group-default">
            <i-button  ghost  @click="cate(0)" type="default">All</i-button>
            <i-button  ghost v-for="(i,index) in categories" @click="cate(i.id)" :key="index" type="default">{{ i.name }}</i-button>
        </div>

        <i-input style="width: 250px" v-model="keyword" type="text" search enter-button placeholder="Enter Keyword..."
                 @on-search="search"></i-input>
    </div>
    <div class="main-list" @scroll="scr()">
        <div class="card-item" v-for="(i,index) in list" :key="index" @click="show(i)">
            <div class="img-contain">
                <img class="item-image" :src='i.product_image'>
                <Tag class="hot-tag" color="error">Hot</Tag>
            </div>
            <div class="content-contain">
                <div><span class="right">Product Name:</span>
                    <p class="l-desc">{{ i.product_name }}</p></div>
                <div><span class="right">Category:</span>
                    <p class="l-desc">{{ i.category }}</p></div>
                <div><span class="right">Commission:</span>
                    <p style="color: #ed4014;" class="l-desc">{{ i.commission_type }}{{ i.commission }}</p></div>
                <div><span class="right">Shop Name:</span>
                    <p class="l-desc">{{ i.shop_name }}</p></div>
                <div><span class="right">Remark:</span>
                    <p class="l-desc">{{ i.remark }}</p></div>
            </div>
        </div>
        <Col class="demo-spin-col" span="8">
        <Spin large fix v-if="showLoading">
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>Loading</div>
        </Spin>
        </Col>
    </div>

    <Drawer transfer="false" :closable="false" width="640" v-model="value4" style="padding: 20px;">
        <div class="demo-drawer-profile">
            <div class="product_image">

            </div>

            <div class="shop_image">

            </div>

        </div>
        <div class="content-contain" style="text-align: left;padding-left: 5vw;">
            <div class="self-c"><p class="inner-title">Product Name:</p> <b class="desc">{{ detail.product_name }}</b>
            </div>
            <div class="self-c"><p class="inner-title">Category:</p> <b class="desc">{{ detail.category }}</b></div>
            <div class="self-c"><p class="inner-title">Commission:</p> <b class="desc">{{ detail.commission_type }}{{
                detail.commission }}</b></div>
            <div class="self-c"><p class="inner-title">Shop Name:</p> <b class="desc">{{ detail.shop_name }}</b></div>
            <div class="self-c"><p class="inner-title">Remark:</p> <b class="desc">{{ detail.remark }}</b></div>

        </div>
    </Drawer>


</div>
<script src="__STATIC__/js/jquery-3.4.1.min.js"></script>
<script src="__STATIC__/js/jquery.rotate.min.js"></script>
<script src="__STATIC__/js/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            value4: false,
            buttonSize: 'middle',
            nScrollHight: 0,
            nScrollTop: 0,
            page: 1,
            list: [],
            categories: [],
            hasNext: true,
            showLoading: false,
            detail: {},
            keyword: '',
            category_id: ''
        },
        created() {
            this.onLoad();
            this.getCategories();
        },
        methods: {
            isMobile() {
                var userAgentInfo = navigator.userAgent;

                var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];

                var mobile_flag = false;

                //根据userAgent判断是否是手机
                for (var v = 0; v < mobileAgents.length; v++) {
                    if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
                        mobile_flag = true;
                        break;
                    }
                }
                var screen_width = window.screen.width;
                var screen_height = window.screen.height;

                //根据屏幕分辨率判断是否是手机
                if (screen_width < 500 && screen_height < 800) {
                    mobile_flag = true;
                }

                return mobile_flag;
            },
            cate(id) {
                var this_ = this;
                this_.page = 1;
                this_.keyword = '';
                this_.category_id = id;
                this_.getList(function (res) {
                    if (res.code == 1) {
                        this_.showLoading = false;
                        if (res.data.current_page == res.data.last_page) {
                            this_.hasNext = false;
                        }
                        this_.list = res.data.data;
                    } else {
                        this_.$Loading.error();
                        this_.$Message.error(res.msg);
                    }
                })

            },
            search() {
                var this_ = this;
                this_.page = 1;
                this_.category_id = 0;
                this_.getList(function (res) {
                    if (res.code == 1) {
                        this_.showLoading = false;
                        if (res.data.current_page == res.data.last_page) {
                            this_.hasNext = false;
                        }else {
                            this_.hasNext = true;
                        }
                        this_.list = res.data.data;
                    } else {
                        this_.$Loading.error();
                        this_.$Message.error(res.msg);
                    }
                })
            },
            show(detail) {
                console.log(detail);
                this.pre();
                this.value4 = true;
                this.detail = detail;

                var html = "<p class=\"inner-title\">Product Image:</p>\n" +
                    "                <a href=\"javascript:void(0)\" data-magnify=\"gallery\" data-src='" + detail.product_image + "' data-caption=\"\">\n" +
                    "                    <img class=\"pre-img\" src='" + detail.product_image + "'>\n" +
                    "                </a>";

                var shop_html = "<p class=\"inner-title\">Shop Image:</p>\n" +
                    "                <a href=\"javascript:void(0)\" data-magnify=\"gallery\" data-src='" + detail.shop_image + "' data-caption=\"\">\n" +
                    "                    <img class=\"pre-img\" src='" + detail.shop_image + "'>\n" +
                    "                </a>";
                $('.product_image').html(html);
                $('.shop_image').html(shop_html);
            },
            scr() {
                var this_ = this;
                this_.$nextTick(() => {
                    const el = document.querySelector('.main-list');
                    const offsetHeight = el.offsetHeight;
                    el.onscroll = () => {
                        const scrollTop = el.scrollTop;
                        const scrollHeight = el.scrollHeight;
                        if ((offsetHeight + scrollTop) - scrollHeight >= 0) {
                            // 需要执行的代码
                            this.page += 1;
                            if (this_.hasNext) {
                                this_.getList(function (res) {
                                    if (res.code == 1) {
                                        this_.showLoading = false;
                                        if (res.data.current_page == res.data.last_page) {
                                            this_.hasNext = false;
                                        }
                                        this_.list = this_.list.concat(res.data.data);
                                    } else {
                                        this_.$Loading.error();
                                        this_.$Message.error(res.msg);
                                    }

                                })
                            }
                        }
                    };
                });
            },
            pre() {
                $(function () {
                    $('[data-magnify]').Magnify({
                        Toolbar: [
                            'prev',
                            'next',
                            'rotateLeft',
                            'rotateRight',
                            'zoomIn',
                            'actualSize',
                            'zoomOut'
                        ],
                        keyboard: true,
                        draggable: true,
                        movable: true,
                        modalSize: [800, 600]
                    });
                })
            },
            getCategories() {
                var this_ = this;
                $.ajax({
                    url: '/api/ceping/index/get_categories',
                    method: 'GET',
                    dataType: 'JSON',
                    data: {},
                    success: function (res) {
                        console.log(res)
                        this_.categories = res.data;
                    },
                    fail: function (res) {
                        console.log(res);
                        this_.$Message.error('网络异常，请刷新后重试！');
                    }
                })
            },
            onLoad: function () {
                var this_ = this;
                if (this_.isMobile()) {
                    location.href = '/index/index/mobile'
                }
                this_.getList(function (res) {
                    console.log(res);
                    if (res.code == 1) {
                        this_.showLoading = false;
                        this_.$Loading.finish();
                        this_.list = res.data.data;
                        if (res.data.last_page == 1) {
                            this_.hasNext = false;
                        }
                    } else {
                        this_.$Loading.error();
                        this_.$Message.error(res.msg);
                    }
                })
            },
            getList(callback) {
                var this_ = this;
                this_.showLoading = true;
                $.ajax({
                    url: '/api/ceping/index',
                    method: 'GET',
                    dataType: 'JSON',
                    data: {'page': this_.page, 'keyword': this_.keyword, 'category_id': this_.category_id},
                    success: function (res) {
                        callback(res)
                    },
                    fail: function (res) {
                        console.log(res);
                        this_.$Message.error('网络异常，请刷新后重试！');
                    }
                })
            }
        }
    });
</script>
</body>
</html>

